<!doctype html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>指尖东源</title>
	<link rel="stylesheet" type="text/css" href="css/normalize.css" />
	<style type="text/css">
		html {
			overflow: hidden;
			-ms-touch-action: none;
			-ms-content-zooming: none;
		}
		body {
			position: absolute;
			margin: 0px;
			padding: 0px;
			background: #fff;
			width: 100%;
			height: 100%;
		}
		#screen {
			position: absolute;
			left:0;
			top:0;
			width: 100%;
			height: 100%;
			background:#000;
			perspective:500px;
			-webkit-perspective:500px;
		}

		.cube {
			position: absolute;
			top: 50%;
			left: 50%;
			width: 0;
			height: 0;
			margin: 0;
			user-select: none;
			transform-style: preserve-3d;
			-webkit-transform-style: preserve-3d;
		}

		.face {
			position: absolute;
			margin-left:-300px;
			margin-top:-200px;
			width:600px;
			height:400px;
			backface-visibility: hidden;
			-webkit-backface-visibility: hidden;
			transform-origin:50% 50%;
			-webkit-transform-origin:50% 50%;
			transition: outline 0.5s ease-in-out 0s;
			cursor: pointer;
		}

		.button {
			position: absolute;
			margin-left:-150px;
			margin-top:-100px;
			width:300px;
			height:200px;
		}
		.face:hover {
			outline: rgba(255,255,255,1) solid 10px !important;
		}
	</style>
	<!--[if IE]>
		<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
	<![endif]-->
</head>
<!--  该图片画廊特效的HTML结构采用立方体的HTML结构。每一个立方体的面使用一个<img>元素来制作，并在其上分别使用data-transform属性来标注这个面需要旋转转换的角度，后面再使用js来将其转换为CSS样式
img.button是正面墙上的每幅图片的缩略图。同样使用data-transform属性来标注它们的CSS属性
该图片画廊的初始CSS样式非常简单。图片画廊包裹容器div#screen被制作为和屏幕相同大小的3D空间。头速度为500
div.cube是立方体，它被居中显示，并使用transform-style: preserve-3d;来制作立方体。因为IE浏览器不支持这个属性，所以看不到立方体效果。
立方体的各个面采用绝对定位，并设置固定的宽度和高度。并使用backface-visibility: hidden;将背面进行隐藏。同时将各个面的转换中心都设置到面的中心点上。
立方体的旋转和各个面的点击和移动触摸事件都在js代码中完成。具体的js代码请参考现在文件的main.js文件-->
<body>
	<div id="screen">
	<div id="cube" class='cube'>
			<!-- cube images -->
			<img id="1" src="img/1.jpg" class='face' data-transform="translateZ(-400px)" style="outline:none !important">
			<img id="2" src="img/2.jpg" class='face' data-transform="rotateY(90deg) translateZ(-400px)">
			<img id="3" src="img/3.jpg"  class='face' data-transform="rotateY(-90deg) translateZ(-400px)">
			<a href="../3dbz/index.html"><img id="4" src="img/4.jpg" class='face' data-transform="rotateY(180deg) translateZ(-400px)"></a>
			<a href="../jzx/index.html"><img id="5" src="img/5.jpg" class='face' data-transform="rotateX(90deg) translateZ(-300px)"></a>
			<a href="../wht/index.html"><img id="6" src="img/6.jpg"  class='face' data-transform="rotateX(-90deg) translateZ(-300px)"></a>
			<!-- bonus image -->
			<a href="http://www.antong56.com"><img id="7" src="img/7.jpg"  class='face' data-transform="rotateY(180deg) translateZ(305px)" style="visibility:hidden"></a>
			<!-- buttons -->
			<img src="img/7.jpg" class='face button' alt="7" data-transform="translateY(-80px) translateZ(-340px) scale(0.5)">
			<img src="img/6.jpg" class='face button' alt="2" data-transform="translateX(-200px) translateY(-80px) translateZ(-340px) scale(0.5)">
			<img src="img/3.jpg"  class='face button' alt="3" data-transform="translateX(200px) translateY(-80px) translateZ(-340px) scale(0.5)">
			<img src="img/4.jpg" class='face button' alt="4" data-transform="translateY(80px) translateZ(-340px) scale(0.5)">
			<img src="img/5.jpg" class='face button' alt="5" data-transform="translateX(-200px) translateY(80px) translateZ(-340px) scale(0.5)">
			<img src="img/6.jpg"  class='face button' alt="6" data-transform="translateX(200px) translateY(80px) translateZ(-340px) scale(0.5)">
		</div>
	</div>
	<script type="text/javascript" src="js/main.js"></script>
</body>
</html>